<template>
  <!-- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" /> -->

  <el-tree :props="props" show-checkbox :load="loadNode" lazy />
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: "Level one 1",
          children: [
            {
              label: "Level two 1-1",
              children: [
                {
                  label: "Level three 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "Level one 2",
          children: [
            {
              label: "Level two 2-1",
              children: [
                {
                  label: "Level three 2-1-1",
                },
              ],
            },
            {
              label: "Level two 2-2",
              children: [
                {
                  label: "Level three 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "Level one 3",
          children: [
            {
              label: "Level two 3-1",
              children: [
                {
                  label: "Level three 3-1-1",
                },
              ],
            },
            {
              label: "Level two 3-2",
              children: [
                {
                  label: "Level three 3-2-1",
                },
              ],
            },
          ],
        },
      ],

      props: {
        label: "name",
        children: "zones",
      },
    };
  },

  methods: {
    handleNodeClick(data) {
      console.log(data);
    },

    loadNode(node, resolve) {
      console.log("loadNode", node, resolve);

      if (node.level === 0) {
        // 顶层节点
        resolve([{ name: "0" }, { name: "1" }]);
      }

      if (node.level === 1 && node.label === "0") {
        resolve([{ name: "0-1" }, { name: "0-2" }]);
      }
    },
  },
};
</script>
